<template>
  <div class="e-wrap">
    <!-- 视频列表 -->
    <div class="e-filter-list">
      <div class="e-add">
        <w-button @on-click='$router.push(`/videoMange/add?three=${$route.query.three}`)'>新增视频</w-button>
      </div>
      <!-- 列表数据 -->
      <div class="e-list clearfix" v-if="videoList.totalCount">
        <w-table :columns="columns" >
          <tr v-for="(val, index) in videoList.recordList" :key="index">
            <td>
              <w-checkbox v-model="val.isChecked" :label='val.id' @on-change='changeCheckedList(val.id)'></w-checkbox>
            </td>
            <td>{{val.sequence}}</td>
            <td>{{val.videoName}}</td>
            <td>{{val.showType == "PC" ? "电脑端" : val.showType == "H5" ? '手机网页' : val.showType == "MOBILE" ? '手机端' : ''}}</td>
            <td>{{val.chName}}</td>
            <td>{{val.display == '1' ? '是' : '否'}}</td>
            <td>
              <em class="cur" @click="$router.push(`/videoMange/add?three=${$route.query.three}&id=${val.id}`)">编辑 |</em>
              <em class="cur" @click="delPanel = true; delParams.idList = [Number(val.id)]">删除</em>
            </td>
          </tr>
        </w-table>
        <div class="all">
          <span>
            <w-checkbox v-model='all' :label='`all`' @on-change='changeCheckedList("all")'><span>本页全选</span></w-checkbox>
          </span>
          <em @click="deleteChecked">删除</em>              
        </div>
        <!-- 分页 -->
        <div class="fr" style="margin-top: 30px">
          <w-paging :current="videoList.currentPage" :total="videoList.pageCount"  @on-page='changePage'></w-paging>
        </div>
      </div>

      <!-- 没有数据时 -->
      <div class="e-list" v-else>
        <w-table :columns="columns" >
          <tr>
            <td colspan="9">暂无数据</td>
            </tr>
        </w-table>
      </div>
    </div>

    <!-- 删除视频 -->
    <w-panel-fixed-wrap v-model="delPanel" :panel-title="true" title="删除视频" :width="`260px`" :height="`200px`" @on-confirm='submitDelete'>
      <div class="panel-classify">
        是否确认删除视频
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiVideoMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      columns: [
        {title: '', width: '5%'},
        {title: '排序'},
        {title: '视频名称'},
        {title: '展示终端'},
        {title: '所属频道'},
        {title: '是否显示'},
        {title: '操作'}
      ],
      all: false,
      delPanel: false,
      // 查询视频列表 -- 参数
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        currentPage: 1,
        showCount: 10
      },
      videoList: {},
      // 删除视频 -- 参数
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        idList: []
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this._getVideoList()
  },
  methods: {
    // 获取 视频列表
    _getVideoList() {
      this.queryParams.accessToken = this.token
      apiVideoMange.getVideo(this.queryParams).then(data => {
        if (data.code != '200') return
        this.videoList = data.data
      })
    },
    changePage(page) {
      this.queryParams.currentPage = page
      this._getVideoList()
    },
    deleteChecked() {
      if (!this.delParams.idList.length) {
        this.$toast('请先选择要删除的视频')
        return
      }
      this.delPanel = true
    },
    changeCheckedList(params) {
      this.delParams.idList = []
      if (params == 'all') {
        this.videoList.recordList.forEach(val => {
          this.$set(val, 'isChecked', this.all)
          if (this.all) {
            this.delParams.idList.push(Number(val.id))
          }
        })
      } else {
        let count = 0
        this.videoList.recordList.forEach(val => {
          if (val.isChecked) {
            count++
            this.delParams.idList.push(Number(val.id))
          }
        })
        if (count == this.videoList.totalCount) {
          this.all = true
        } else {
          this.all = false
        }
      }
    },
    // 删除视频
    submitDelete() {
      this.delParams.accessToken = this.token
      apiVideoMange.delVideo(this.delParams).then(data => {
        if (data.code != '200') return
        this.$toast('删除成功', () => {
          this.delPanel = false
          this.changePage(1)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-filter-options {
  padding-bottom: 20px;
  border-bottom: 1px solid $border-gray-light;
  .dis-block {
    vertical-align: middle;
  }
}
.e-item {
  margin-left: 0;
  margin-right: 20px;
}
.e-filter-list {
  width: 100%;
  table {
    tr {
      font-size: 14px;
      & td:nth-of-type(1) {
        border-right: 0;
      }
    }
  }
  em {
    color: $color-text-bule;
  } 
  .all {
    margin-top: 10px;
    & > span {
      margin-left: 18px;
      margin-right: 20px;
    }
  }
  .e-add {
      margin: 20px 0;
  }
}
</style>